<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>仪表板</title>
    <link href='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css' rel='stylesheet'>
    <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css'>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        .stats-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }

        .stats-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.5rem;
        }

        .welcome-banner {
            background: linear-gradient(135deg, #ffccd5, #cdb4db);
            border-radius: 10px;
            padding: 25px;
            color: white;
            margin-bottom: 25px;
        }

        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }

        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .chart-wrapper {
            height: 300px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class='welcome-banner'>
        <h2>欢迎回来！</h2>
        <p>BeautyPlus 管理系统</p>
    </div>

    <div class='row'>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-primary text-white'>
                        <i class='fas fa-box-open'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>128</h5>
                        <small class='text-muted'>商品总数</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-success text-white'>
                        <i class='fas fa-shopping-cart'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>24</h5>
                        <small class='text-muted'>今日订单</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-info text-white'>
                        <i class='fas fa-users'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>1,248</h5>
                        <small class='text-muted'>用户总数</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-warning text-white'>
                        <i class='fas fa-yen-sign'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>¥24,560</h5>
                        <small class='text-muted'>本月收入</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 销售趋势图表 -->
    <div class="chart-container">
        <div class="chart-title">销售趋势</div>
        <div id="salesChart" class="chart-wrapper"></div>
    </div>

    <div class='row'>
        <div class='col-md-8'>
            <!-- 商场指标图表 -->
            <div class="chart-container">
                <div class="chart-title">商场指标</div>
                <div id="mallMetricsChart" class="chart-wrapper"></div>
            </div>
        </div>
        <div class='col-md-4'>
            <div class='stats-card bg-white p-3'>
                <h5>热门分类</h5>
                <ul class='list-group list-group-flush'>
                    <li class='list-group-item d-flex justify-content-between align-items-center'>
                        护肤品
                        <span class='badge bg-primary rounded-pill'>42</span>
                    </li>
                    <li class='list-group-item d-flex justify-content-between align-items-center'>
                        彩妆
                        <span class='badge bg-primary rounded-pill'>35</span>
                    </li>
                    <li class='list-group-item d-flex justify-content-between align-items-center'>
                        服装
                        <span class='badge bg-primary rounded-pill'>28</span>
                    </li>
                    <li class='list-group-item d-flex justify-content-between align-items-center'>
                        配饰
                        <span class='badge bg-primary rounded-pill'>19</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 销售趋势图表
        var salesChart = echarts.init(document.getElementById('salesChart'));
        
        var salesOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额', '订单数']
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '销售额(元)',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: '订单数(个)',
                    position: 'right'
                }
            ],
            series: [
                {
                    name: '销售额',
                    type: 'bar',
                    data: [12000, 15000, 18000, 22000, 25000, 30000, 28000, 32000, 35000, 38000, 40000, 45000],
                    itemStyle: {
                        color: '#ff6b9d'
                    }
                },
                {
                    name: '订单数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [120, 150, 180, 220, 250, 300, 280, 320, 350, 380, 400, 450],
                    itemStyle: {
                        color: '#a16ae8'
                    },
                    smooth: true
                }
            ]
        };
        
        salesChart.setOption(salesOption);

        // 商场指标图表
        var mallMetricsChart = echarts.init(document.getElementById('mallMetricsChart'));
        
        var mallMetricsOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['客流量', '转化率', '客单价']
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '人数',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: '转化率(%)',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name: '客流量',
                    type: 'bar',
                    data: [1200, 1500, 1000, 1800, 2200, 2800, 2500],
                    itemStyle: {
                        color: '#4ecdc4'
                    }
                },
                {
                    name: '转化率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [12, 15, 8, 18, 22, 28, 25],
                    itemStyle: {
                        color: '#ff9f1c'
                    },
                    smooth: true
                },
                {
                    name: '客单价',
                    type: 'line',
                    data: [85, 92, 78, 105, 120, 135, 128],
                    itemStyle: {
                        color: '#ff6b6b'
                    },
                    smooth: true
                }
            ]
        };
        
        mallMetricsChart.setOption(mallMetricsOption);

        // 窗口大小调整时重置图表大小
        window.addEventListener('resize', function() {
            salesChart.resize();
            mallMetricsChart.resize();
        });
    </script>
</body>

</html>